<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>演示：PHP+jQuery+Ajax多图片上传</title>
 
<style type="text/css">
.demo{width:760px; margin:40px auto 0 auto; min-height:150px;}
.preview{width:200px;border:solid 1px #dedede; margin:10px;padding:10px;}
.demo p{line-height:26px}
.btn{
	position: relative;
	overflow: hidden;
	margin-right: 4px;
	display: inline-block;
*display:inline;	font-size: 14px;
	line-height: 18px;
*line-height:20px;	color: #fff;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	background-color: #5bb75b;
	border: 1px solid #cccccc;
	border-color: #e6e6e6 #e6e6e6 #bfbfbf;
	border-bottom-color: #b3b3b3;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	width: 100%;
	padding-top: 4px;
	padding-right: 10px;
	padding-bottom: 4px;
	padding-left: 10px;
}
.btn input {position: absolute;top: 0; right: 0;margin: 0;border: solid transparent;opacity: 0;filter:alpha(opacity=0); cursor: pointer;}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.wallform.js"></script>
<script type="text/javascript">
$(function(){
	$('#photoimg').die('click').live('change', function(){
		var status = $("#up_status");
		var btn = $("#up_btn");
		$("#imageform").ajaxForm({
			target: '#preview', 
			beforeSubmit:function(){
				status.show();
				btn.hide();
			}, 
			success:function(){
				status.hide();
				btn.show();
			}, 
			error:function(){
				status.hide();
				btn.show();
		} }).submit();
	});
});
</script>
</head>

<body>
 
 
 
  <div class="demo">

        
        <form id="imageform" method="post" enctype="multipart/form-data" action="upload.php">
			<div id="up_status" style="display:none"><img src="loader.gif" alt="uploading"/></div>
			<div id="up_btn" class="btn">
				<span>添加图片</span>
				<input id="photoimg" type="file" style="width:100%" name="photoimg">
			</div>
		</form>
        <p>&nbsp;</p>
		<div id="preview"></div>
</div>
	
  
  <br/>
</div>

 
</body>
</html>